<!--
 * @Author: Betty
 * @Date: 2020-11-04 17:54:33
 * @LastEditors: Betty
 * @LastEditTime: 2021-01-26 22:43:36
 * @Description: 者也专栏根组件
-->
<template>
  <div class="container">
    <!-- 使用头部组件 -->
    <global-header :user="currentUser" @logout="removeToken"></global-header>
    <!-- 提示组件 -->
    <!-- 这里的error来自于store，是具有status和message两个属性的对象 -->
    <!-- <message :message="error.message" type="error" v-if="error.status"></message> -->
    <!-- 加载提示组件 -->
    <loader text="拼命加载中" background="rgba(0,0,0,.8)" v-if="isLoading"></loader>
    <!-- 中间可变的部分使用<router-view>来渲染内容 -->
    <router-view></router-view>
    <!-- 使用底部组件 -->
    <global-footer></global-footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch } from 'vue'
// 导入bootstrap样式文件
import 'bootstrap/dist/css/bootstrap.min.css'
// 导入头部组件
import GlobalHeader from './components/GlobalHeader.vue'
// 导入底部组件
import GlobalFooter from './components/GlobalFooter.vue'
// 导入loader组件
import Loader from './components/Loader.vue'
// 导入useStore方法
import { useStore } from 'vuex'
// 导入全局数据
import { GlobalDataProps } from './store'
// 导入createMessage函数
import createMessage from './components/createMessage'
export default defineComponent({
  name: 'App',
  components: {
    GlobalHeader,
    GlobalFooter,
    Loader
  },
  setup() {
    // 自己定义的currentUser我们不需要了，我们要用的是store里的共享数据
    // 调用useStore，得到store对象，然后从store中的state里面拿到数据
    const store = useStore<GlobalDataProps>()
    const currentUser = computed(() => store.state.user)
    // 从store中获取是否正在loading
    const isLoading = computed(() => store.state.loading)
    // 拿到store里的error值
    const error = computed(() => store.state.error)
    // 侦听error的值
    watch(() => error.value.status, () => {
      const { status, message } = error.value
      // 如果发现status是true且message存在（因为它是可选属性，所以可能不存在）才显示提示
      if (status && message) {
        createMessage(message, 'error')
        console.log(message)
      }
    })
    // 退出登录
    const removeToken = () => {
      store.commit('logout')
    }
    return {
      currentUser,
      isLoading,
      error,
      removeToken
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
